<template>
  <div class="body">
    <el-row>
      <el-col :span="3">
        <el-input
          v-model="ser.employee_name"
          placeholder="请输入员工名称"
        ></el-input>
      </el-col>
      <el-col :span="8" style="display: flex;">
        <el-button  class="add_btn" @click="dwone_duka" style="width: 30%;">读卡通讯程序下载</el-button>
        <el-button
          @click="company_name_click(0)"
          icon="el-icon-search"
          class="add_btn"
        >
          搜索</el-button
        >
        <el-button style="width: 30%;"
          icon="el-icon-refresh"
          @click="company_name_clicks"
          class="add_btn"
        >
          重置</el-button
        >
        <el-button @click="add_product" icon="el-icon-plus"  style="width: 30%;" class="add_btn"
          >新增员工</el-button
        >
      </el-col>
      <el-col :span="4">
        <el-input
            v-model="ser.card_number"
            disabled
            placeholder="请读取卡片信息"
            style="margin-left:10px;"
          >
            <el-button
              @click="getkas"
              slot="append"
              icon="el-icon-plus"
              style="background: #1890ff; color: #fff"
              >读卡</el-button
            >
          </el-input>
      </el-col>
    </el-row>

    <el-table :data="productList" v-loading="loading"   stripe style="width: 100%" border>
      <el-table-column prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="employee_name" label="员工名称" width="180">
      </el-table-column>
      <el-table-column prop="username" label="账号"> 
        <template slot-scope="scope">
          <span>{{scope.row.user.username }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="password" label="密码"> 
        <template slot-scope="scope">
          <span>{{scope.row.user.password }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工种" width="120">
        <template slot-scope="scope">
          {{scope.row.job_type?scope.row.job_type.job_type:scope.row.user.role[0].name?scope.row.user.role[0].name:''}}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="150"> 
        <template slot-scope="scope">
          <span>{{scope.row.user.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="详细地址" prop="address" width="200">
      </el-table-column>
      <el-table-column label="籍贯" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.native_place }}</span>
        </template>
      </el-table-column>
      <el-table-column label="紧急联系人" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.emergency_contact }}</span>
        </template>
      </el-table-column>
      <el-table-column label="紧急联系电话" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.emergency_contact_phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工号" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.card_number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="基本工资" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.base_pay }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="入职时间"
        width="120"
        :formatter="formatterTime"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.hiredate.slice(0, 11) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交方式" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.submit_way == 1 ? "手动" : "自动" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button
            @click="set_product(scope.row)"
            type="text"
            >编辑</el-button
          >
          <el-button
            @click="push_order(scope.row)"
            type="text"
            >查看订单</el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon-color="red"
            title="是否删除这条数据？"
            @confirm="del_product(scope.row)"
          >
            <el-button slot="reference" type="text"  style="margin-left: 15px;">删除</el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        @prev-click="prev"
        @next-click="next"
        :current-page.sync="pagination.page"
        :page-size="pagination.per_page"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="isProduct"
      width="50%"
      :close-on-click-modal="false"
      @close="dialog_click"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="员工名称" prop="employee_name">
              <el-input v-model="ruleForm.employee_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职时间" prop="hiredate">
              <el-date-picker
                style="width: 100%"
                v-model="ruleForm.hiredate"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="角色" prop="roles_id">
              <el-select  style="width: 100%;"
                v-model="ruleForm.roles_id"
                placeholder="请选择角色"
                @change="changeValue"
              >
                <el-option
                  v-for="item in roleList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop="usernames">
              <el-input
                v-model="ruleForm.usernames"
                :disabled="isset"
                @input="changeValue"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="passwords">
              <el-input
                v-model="ruleForm.passwords"
                @input="changeValue"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工种" prop="job_type_id">
              <el-select
                v-model="ruleForm.job_type_id"
                placeholder="请选择"
                style="width: 100%"
                @change="changeValue"
              >
                <el-option
                  v-for="item in dataList"
                  :key="item.id"
                  :label="item.job_type"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input
                v-model="ruleForm.phones"
                @input="changeValue"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="基本工资" prop="base_pay">
              <el-input
                v-model="ruleForm.base_pay"
                @input="changeValue"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="身份证号" prop="id_card">
              <el-input
                v-model="ruleForm.id_card"
                @input="changeValue"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="ruleForm.address"
                @input="changeValue"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="籍贯" prop="native_place">
              <el-input
                v-model="ruleForm.native_place"
                @input="changeValue"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联系人" prop="emergency_contact">
              <el-input
                v-model="ruleForm.emergency_contact"
                @input="changeValue"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="紧急联系电话" prop="emergency_contact_phone">
              <el-input
                v-model="ruleForm.emergency_contact_phone"
                @input="changeValue"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡号" prop="card_number">
              <el-input
                v-model="ruleForm.card_number"
                @input="changeValue"
                disabled
              >
                <el-button
                  @click="getka"
                  slot="append"
                  icon="el-icon-plus"
                  style="background: #1890ff; color: #fff"
                  >读卡</el-button
                >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="" prop="base_pay">
              <el-input
                v-model="ruleForm.base_pay"
                @input="changeValue"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-row
              style="
                display: flex;
                justify-content: space-around;
                align-items: center;
                text-align: center;
              "
            >
              <el-col :span="12" style="font-size: 12px; font-weight: bold"
                >读卡通讯程序下载</el-col
              >
              <el-col :span="12">
                <el-button @click="dwone_duka" style="float: left"
                  >下载</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isProduct = false" style="margin-right: 15px"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitadd('ruleForm')"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEmployeeList,
  createEmployee,
  delEmployee,
  getJobTypeList,
} from "@/api/product/index";
import { getRoleList } from "@/api/role/index";

import {
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
export default {
  data() {
    var checkphone = (rule, value, callback) => {
      // let phoneReg = /(^\d{10,11}$)/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (value.length > 11) {
        callback(new Error("请输入正确的手机号!"));
      } else {
        callback();
      }
    };
    return {
      loading:true,
      formatterTime(row, column) {
        let data = row[column.property];
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
      },
      ser: {
        employee_name: "",
        card_number:''
      },
      isset: false,
      roleList: [],
      title: "",
      isProduct: false,
      productList: [],
      ruleForm: {
        employee_name: "",
        usernames: "",
        passwords: "",
        // roles_id: "",
        job_type_id: "",
        phones: "",
        address: "",
        native_place: "", //籍贯
        emergency_contact: "", //紧急联系人
        emergency_contact_phone: "", //紧急联系电话
        card_number: "", //工号
        base_pay: "", //基本工资
        hiredate: "", //入职时间
        submit_way: "1", //提交方式
        id_card: "",
        id: "",
      },
      rules: {
        // id_card:[
        //   {
        //     required: true,
        //     message: '请输入身份证号',
        //     trigger: 'blur'
        //   }
        // ],
        usernames: [
          {
            required: true,
            message: "请输入员工APP账号",
            trigger: "blur",
          },
        ],
        passwords: [
          {
            required: true,
            message: "请输入员工APP密码",
            trigger: "blur",
          },
        ],
        employee_name: [
          {
            required: true,
            message: "请输入员工名称",
            trigger: "blur",
          },
        ],
        job_type_id: [
          {
            required: true,
            message: "请选择工种",
            trigger: "blur",
          },
        ],
        phones: [
          {
            required: true,
            validator: checkphone,
            trigger: "blur",
          },
        ],
      },
      options: regionDataPlus,
      selectedOptions: [],
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      dataList: [],
    };
  },
  mounted() {
    this.getType();
    this.getlist();
    this.getrole();
  },
  methods: {
    push_order(row){
      this.$router.push({
        name: "staff_order",
        path: "/staff_order",
        query: {
          data: row.user_id,
          name:row.employee_name
        },
      });
    },
    dwone_duka() {
      window.open("https://api.likai.vip/exe/card.exe", "_blank");
    },
    getkas() {
      var that = this;
      that
        .$axios("http://127.0.0.1:9191/getCardId")
        .then(function (response) {
          console.log(response.data);
          if (response.data.state == 0) {
            that.ser.card_number = response.data.cardid;
            that.getlist()
          }
        })
        .catch(function (err) {
          that.$message.error("请下载并启动读卡通讯程序或检查读卡器是否接入~");
          console.log(err);
        });
    },
    getka() {
      var that = this;
      that
        .$axios("http://127.0.0.1:9191/getCardId")
        .then(function (response) {
          console.log(response.data);
          if (response.data.state == 0) {
            that.ruleForm.card_number = response.data.cardid;
          }
        })
        .catch(function (err) {
          console.log(err);
          that.$message.error("请下载并启动读卡通讯程序或检查读卡器是否接入~");
        });
    },
    dialog_click() {
      this.ruleForm = {
        employee_name: "",
        usernames: "",
        passwords: "",
        roles_id: "",
        job_type_id: "",
        phones: "",
        address: "",
        native_place: "", //籍贯
        emergency_contact: "", //紧急联系人
        emergency_contact_phone: "", //紧急联系电话
        card_number: "", //工号
        base_pay: "", //基本工资
        hiredate: "", //入职时间
        submit_way: "1", //提交方式
        id_card: "",
        id: "",
      };
      this.$nextTick();
      this.isset = false;
    },
    getrole() {
      getRoleList().then((res) => {
        if (res.code == 200) {
          this.roleList = res.data.data;
        }
      });
    },
    getType() {
      getJobTypeList().then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
        }
      });
    },
    del_product(row) {
      console.log("ww");
      delEmployee({
        id: row.id,
        is_del: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.isProduct = false;
          this.$message.success("提交成功");
          this.getlist();
        }
      });
    },
    handleChange(value) {
      console.log("21121212", value);
      let position = `${CodeToText[value[0]]}/${CodeToText[value[1]]}/${
        CodeToText[value[2]]
      }`;
      let arry = position.split("/");
      this.ruleForm.province = arry[0];
      this.ruleForm.city = arry[1];
      this.ruleForm.county = arry[2];
    },
    getlist() {
      getEmployeeList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
          this.loading=false

        }
      });
    },
    company_name_click(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      getEmployeeList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    company_name_clicks() {
      this.ser.company_name = "";
      getEmployeeList(this.pagination).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
        }
      });
    },

    add_product() {
      this.title = "新增员工";
      this.isProduct = true;
      this.isset = false;
      this.$nextTick(function () {
        this.$refs.ruleForm.resetFields();
      });
    },
    submitadd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createEmployee(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.isProduct = false;
              this.$message.success("提交成功");
              this.getlist();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    set_product(row) {
      console.log(row);
      this.ruleForm.employee_name = row.employee_name;
      this.ruleForm.id = row.user_id;
      this.ruleForm.phones = row.user.phone;
      this.ruleForm.usernames = row.user.username;
      this.ruleForm.passwords = row.user.password;
      this.ruleForm.roles_id = row.user.role[0].id;
      this.ruleForm.job_type_id=row.job_type_id
      this.ruleForm.address=row.address
      this.ruleForm.native_place=row.native_place
      this.ruleForm.emergency_contact=row.emergency_contact
      this.ruleForm.emergency_contact_phone=row.emergency_contact_phone
      this.ruleForm.card_number=row.card_number
      this.ruleForm.base_pay=row.base_pay
      this.ruleForm.hiredate=row.hiredate
      this.title = "员工编辑";
      this.isProduct = true;
      this.isset = true;
      console.log(this.ruleForm);
    },
    handleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      console.log("ss");
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
    changeValue() {
      this.$forceUpdate();
    },
  },
};
</script>

<style>
.s {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: right;
}
</style>
